<template>
  <div class="prolistTable">
    <el-table
    :data="proinfo"
    border
    style="width: 100%">
      <el-table-column
        prop="opus_name_list"
        label="授权IP "
        min-width="172">
      </el-table-column>
      <!-- <el-table-column
        label="被授权商名称"
        min-width="180">
        <template slot-scope="scope">
          {{scope.row.merchant_name}}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="good_name"
        label="商品名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="security_code_count"
        label="授权数量"
        min-width="110">
      </el-table-column>
      <el-table-column
        prop="code_segment"
        label="码段"
        min-width="107">
      </el-table-column>
      <!-- 提交时间 -->
      <el-table-column
        prop="create_time"
        label="提交时间"
        min-width="105">
      </el-table-column>
      <!-- 状态 -->
      <el-table-column
        label="状态"
        min-width="65" class-name="statusClass">
       <template slot-scope="scope">
         <div class="proStatus">{{statusFliter(scope.row.status)}}</div>
       </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        prop="status"
        label="操作"
        min-width="160">
        <template slot-scope="scope">
          <!-- 被授权商详情 -->
          <el-button  v-show="scope.row.status === 1"  type="text" @click="toPost(scope.row)">付款 </el-button>
          <el-button type="text" @click="lookDetailIP(scope.row)">详情 </el-button>
          <!-- <el-button  v-show="scope.row.status === 3"  type="text" @click="toPost(scope.row)">邮件</el-button> -->
          <!-- <el-button  v-show="scope.row.status === 7"  type="text" @click="toPost(scope.row)">再次申请</el-button> -->
          <el-button  v-show="scope.row.status === 1 " @click="delTableClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-dialog width="25%" class="email g" title="收货地址" :visible.sync="dialogEmail">
      <el-form :model="form">
        <el-form-item label="快递公司 :" :label-width="formLabelWidth" >
          <el-input v-model="form.postName" auto-complete="off" maxlength="40"></el-input>
        </el-form-item>
        <el-form-item label="快递单号 :" :label-width="formLabelWidth">
          <el-input v-model="form.postNo" auto-complete="off" maxlength="30"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEmail = false">取 消</el-button>
          <el-button type="primary"  @click="doPostAddr('form')">确定邮寄</el-button>
      </div>
    </el-dialog> -->
    <el-dialog  width="25%" class="dlte g" title="删除" :visible.sync="dialogDele">
      <h2>确认删除订单吗</h2>
      <div class="btn">
        <el-button @click="dialogDele = false" >取 消</el-button>
        <el-button @click="dialogDele = false" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog  width="25%" class="dlte g" title="删除" :visible.sync="dialogReason">
      <h2 class="reason-cont">您订单被退了原因是:</h2>
      <div class="reason-cont">
        {{reason}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request.js'
export default {
  name: 'AcTable',
  props: {
    proinfo: Array
  },
  computed: {
    mes () {
      return true
    }
  },
  data () {
    return {
      dialogReason: false,
      dialogEmail: false,
      dialogDele: false,
      reason: 'ajepoeojpje',
      codeSegmentId: '',
      form: {
        postName: '',
        postNo: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '80px'
    }
  },
  methods: {
    deleClick () {
      this.dialogDele = true
    },
    open3 () {

    },
    //  申请码
    shouquanHandleClick (row) {
      this.$message({
        type: 'info',
        message: '该功能正在开发中，敬请期待！'
      })
    },
    //  编辑
    editHandleClick (row) {
      this.$router.push({path: '/ordDetail'})
    },
    //  用码明细
    codeDetail (row) {
      this.$message({
        type: 'info',
        message: '该功能正在开发中，敬请期待！'
      })
    },
    //  去被授权商详情
    lookDetail (row) {
      this.$router.push('/ordDetail/' + row.code_segment_id)
    },
    //  去ip授权商详情
    lookDetailIP (row) {
      this.$router.push('/ipordDetail/' + row.code_segment_id)
    },
    delTableClick (row) {
      this.$confirm('确认要删除该授权订单？', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'delLicenseWrapper'
      }).then(() => {
        request.delCodeSegment(row.code_segment_id)
          .then((res) => {
            //  this.$router.push({path: '/authcode'})
            this.$parent.getOrdliset()
          })
          .catch((error) => {
            console.log(error)
          })
      }).catch(() => {})
    },
    //  处理状态
    checkStatus (p) {
      if (p === 0) {
        return '编辑中'
      } else if (p === 5) {
        return '用码中'
      } else if (p === 3) {
        return '待审核'
      } else if (p === 4) {
        return '审核退回'
      } else if (p === 2) {
        return '审核通过'
      } else {
        return '状态异常'
      }
    },
    ssTring (str) {
      if (!str) {
        return 'undefined'
      } else {
        let strs = []
        strs = str.split(',').filter(function (s) {
          //  注：IE9(不包含IE9)以下的版本没有trim()方法
          return s && s.trim()
        })
        let newStr = strs.join()
        let nstr
        if (newStr.indexOf('/1') !== -1) {
          nstr = newStr.replace(/\/1/g, '')
        }
        if (newStr.indexOf('/2') !== -1) {
          nstr = newStr.replace(/\/2/g, '')
        }
        return nstr
      }
    },
    statusFliter: function (val) {
      switch (val) {
        case 1:
          return '待付款'
        case 9:
          return '待确认'
        case 2:
          return '待制码'
        case 3:
          return '制码中'
        case 6:
          return '待邮寄'
        case 7:
          return '已完成'
        case 8:
          return '已关闭'
      }
    },
    toPost: function (row) {
      this.codeSegmentId = row.code_segment_id
      sessionStorage.removeItem('getCodeInfo')
      this.$router.push({
        name: 'CodePay',
        params: {
          addr: row.addrDetail,
          code_segment_id: row.code_segment_id,
          getter: row.linkName,
          phoneNumber: row.linkPhone,
          money: row.money
        }
      })
    },
    doPostAddr () {
      if (this.form.postName === '') {
        this.$message({
          message: '请输入快递公司',
          type: 'warning'
        })
        return
      }
      if (this.form.postNo === '') {
        this.$message({
          message: '请输入快递单号',
          type: 'warning'
        })
        return
      }
      request.doPostAddr(this.form)
        .then(({ data }) => {
          //  console.log('邮寄')
        })
    }
  }
}
</script>
<style lang="stylus">
@import '~styles/varibles.styl'
.delLicenseWrapper {
  width: 410px;
  height: 250px;
  border: 4px solid #fff;
  border-radius: 8px;
  margin: 0 auto;
  top: 50%;
}
.g div.el-dialog__header{
  border-bottom: solid 1px $boxborder
}
.dialog-footer>button:nth-child(2){
  background-color:$baseColor;
}
.delLicenseWrapper .el-message-box__header {
  height: 45px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 0 10px 0 18px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__title {
  line-height: 44px;
  color: #333333;
  font-size: 16px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn .el-message-box__close {
  color: rgb(189, 189, 189);
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.delLicenseWrapper .el-message-box__content {
    position: relative;
    padding: 0;
}
.delLicenseWrapper .el-message-box__message p {
  padding-top: 12px;
  font-size: 16px;
  line-height: 106px;
  height: 118px;
  text-align: center;
}
.delLicenseWrapper .el-message-box__btns {
    padding: 0 71px;
    text-align: center;
    height: 40px;
}
.delLicenseWrapper .el-message-box__btns .el-button {
  width: 120px;
  height: 40px;
  padding: 0;
  text-align: center;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
  float: right;
}
.delLicenseWrapper .el-button:focus,.delLicenseWrapper .el-button:hover {
    color: #333333;
    border-color: #E6E6E6;
    background-color: #fff;
}
.delLicenseWrapper .el-message-box__btns .el-button--primary {
    color: #FFF;
    background-color: $baseColor;
    border-color: $baseColor;
    float: left;
    margin-left: 0;
}
.lh-wrap .el-table {
  font-size: 14px;
  color: #333;
}
.lh-wrap .el-button--text {
  color: $baseColor;
}
.lh-wrap .el-button--text:focus, .lh-wrap .el-button--text:hover {
  color: $baseColor;
}
.prolistTable .el-table__header-wrapper thead.has-gutter tr th {
  background-color: #f5f6fa;
  color: #333333;
}
.prolistTable .el-table__header-wrapper thead.has-gutter tr th.statusClass .cell {
  text-align: center;
}
.prolistTable .el-table_1_column_4 {
  text-align: center;
}
.prolistTable .proImgInfo .el-image__error {
  font-size: 10px;
}
</style>
<style lang="stylus" scoped>
.proInfoBox
  height 60px
  width 100%
  .proImgInfo
    width 60px
    height 60px
    margin-right 5px
    float left
  .proInfo
    height 60px
    width 73.5%
    float left
    .proID
      height 16px
      line-height 16px
      width 100%
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      color #999999
      font-size 12px
    .proName
      height 44px
      line-height 20px
      padding 2px 0
      width 100%
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 2
      color #333333
      font-size 12px
      font-weight 400
.proStatus
  text-align center
.el-dialog__body h2 {
  padding-bottom 30px
  text-align center
}
.el-dialog__body div.btn {
  text-align right
  padding-right 20px
}
.el-dialog__body h2.reason-cont {
  padding-bottom 16px
  text-align left
}
.el-dialog__body div.reason-cont {
  text-align left
  text-indent 2em
  padding-bottom 20px
}
</style>
